<template>
  <div class="product-display-container">
    <el-row type="flex" justify="center">
      <el-col :span="8" v-for="(item, index) in products" :key="index" class="product-item">
        <div class="product-card">
          <div class="product-img">
            <img :src="item.cover" alt="Product Image">
          </div>
          <div class="product-info">
            <h3 class="product-title">{{ item.title }}</h3>
            <p class="product-description">{{ item.detail }}</p>
            <div class="product-price">价格：{{ item.price }}元</div>
            <div class="product-quantity">剩余数量：{{ item.amount }}</div>
          </div>
          <el-button type="primary" class="purchase-btn" @click="handlePurchase(item)">立即购买</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {alipayTradePagePay} from "@/api/pay/alipay";
import {listingCommodity} from "@/api/pay/paylist";

export default {
  data() {
    return {
      products: []  // 商品集合
    };
  },
  methods: {
    initCommodity() {
      listingCommodity().then(res => {
        this.products = res.data;
      })
    },

    handlePurchase(product) {

      alipayTradePagePay(product.id).then(res => {
        console.log(res.data)
        document.write(res.data)
      })
      // 点击购买按钮后的逻辑
      this.$modal.msgSuccess("购买成功"+product.title);
    }
  },
  mounted() {
    this.initCommodity();
  }
};
</script>

<style scoped>
.product-display-container {
  margin-left: 8%;
  margin-top: 6%;
  text-align: center;
}

.product-item {
  display: inline-block;
}

.product-card {
  width: 240px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-img img {
  width: 100%;
  height: auto;
  padding: 10px;
}

.product-info {
  padding: 10px;
}

.product-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.product-description {
  color: #999;
  line-height: 1.5;
  margin-bottom: 10px;
}

.product-price {
  font-weight: bold;
  color: #ff4500;
}

.purchase-btn {
  width: 100%;
}
</style>
